import React, { PureComponent } from 'react'
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'
import Tag from '@/components/Tag'
import css from './info.module.scss'
import { formatNumber, howLong } from '@/utils'
class VideoInfo extends PureComponent {
    footRef = React.createRef()

    static propTypes = {
        detailData: PropTypes.object.isRequired,
        tags: PropTypes.array
    }

    state = {
        isExpand: false,
        footHeight: 0
    }

    toggle = () => {
        const { isExpand } = this.state
        let height = 0
        this.setState({
            isExpand: !isExpand
        }, () => {
            if (this.state.isExpand) {
                height = window.getComputedStyle(this.footRef.current).height
            }       
            this.setState({
                footHeight: height
            })
        })                
    }

    renderTag = () => {
        const { detailData } = this.props
        if (!detailData) {
            return null
        }
        const { label, mission_id } = detailData
        if (!label) {
            return null
        }
        const { type } = label
        if (type === 1) {
            return (
                <Tag 
                    type="primary" 
                    plain
                    round
                    className="hot"
                    style={{'backgroundColor': '#f4f4f4'}}
                >
                    <i className="fa fa-hot"></i>热门
                </Tag>
            )
        } else if (mission_id) {
            return (
                <Tag 
                    type="primary" 
                    plain 
                    round
                    className="hot"
                    style={{'backgroundColor': '#f4f4f4'}}
                >活动</Tag>
            )
        } else {
            return null
        }       
    }

    handleSpace = () => {
        const { owner: { mid } } = this.props.detailData
        this.props.history.push(`/space/${mid}`)
    }

    handleTag = item => {
        this.props.history.push(`/tag/${item.tag_id}`)
    }

    render() {
        const { isExpand, footHeight } = this.state
        const { detailData, tags } = this.props
        const { title, owner: { name }, stat: { view, danmaku }, pubdate, desc } = detailData
        return (
            <div className={css['wrap']}>
                <div className="head">
                    {this.renderTag()}
                    <h1 className={`title ${isExpand ? 'title-expand' : ''}`} onClick={this.toggle}>{ title }</h1>
                    <span onClick={this.toggle}>
                        <i className={`fa ${isExpand ? 'fa-dropup' : 'fa-dropdown'}`}></i>
                    </span>
                </div>
                <div className="body">
                    <span className="author" onClick={this.handleSpace}>
                        <i className="fa fa-up-zhu"></i><span>{ name }</span>
                    </span>
                    <span>{ formatNumber(view) }次观看</span>
                    <span>{ formatNumber(danmaku) }弹幕</span>
                    <span>{ howLong(pubdate) }</span>
                </div>
                <div className="foot" style={{'height': footHeight}}>
                    <div ref={this.footRef} className="foot-content">
                        <div className="copyright"><i className="fa fa-ban ban"></i> 未经作者授权禁止转载</div>
                        <div className="desc">{ desc }</div>
                        <div className="tags">
                            { 
                                tags.map(item => {
                                    return (
                                        <Tag className="vtag" key={ item.tag_id } round onClick={() => this.handleTag(item)}>{ item.tag_name }</Tag>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default withRouter(VideoInfo)